<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
	<link type="text/css" href="<c:url value="/resources/static/css/ajaxLogin/ui-lightness/jquery-ui-1.8.13.custom.css"/>" rel="stylesheet" />
	<link type="text/css" href="<c:url value="/resources/static/css/ajaxLogin/style.css"/>" rel="stylesheet" />
	<script src="<c:url value="/resources/static/js/jquery-1.6.1.min.js"/>" type="text/javascript"></script>
	<script type="text/javascript" src="<c:url value="/resources/static/js/jquery-ui-1.8.13.custom.min.js"/>"></script>
	<script type="text/javascript">
		function loadLinks() {
			var links = $("#links");
			links.load(
				'<c:url value="/bank/ibank/api/b2c/authorize/doAuthorize" />',
				function(responseText, textStatus, xhr) {
					if (xhr.status == 200) {
						$("#ajaxLogin").click(function() {
							loadLogin();
						});
					} else {
						links.html('<h4 style="color: #F00">Could not load URL "/doAuthorize"</h4>');
						links.show();
					}
				});
		}
		function loadLogin() {
			$("#login").load(
				'<c:url value="/bank/auth/ajaxlogin" />',
				function(responseText, textStatus, xhr) {
					if (xhr.status == 200) {
						$("#login").dialog('open');
					} else {
						$("#login").html('<h4 style="color: #F00">Could not load URL "/login"</h4>');
					}
				});
		}
		function performLogin(form) {
			form.find(".message").hide();
			form.find(".error").hide();
			$.post(
				'<c:url value="/bank/auth/ajaxlogin" />',
				form.serialize(),
				function (data, textStatus) {
					if (data.status) {
						$("#login").dialog('close');
						loadLinks();
					} else {
						var err = form.find(".error");
						err.html("Login Failed [" + data.error + "]");
						err.show();
					}
				}, "json");
		}
		$(document).ready(function() {
			// Initialize dialog window
			$("#login").dialog({ 
				autoOpen: false,
				modal: true,
				position: 'center',
				resizable: false,
				width: 500,
				open: function() {
					$("#form form button").click(function() {
						performLogin($("#form form"));
					});
					$("#form form input, #form form button").keypress(function(e) {
						if (e.which == 13) {
							performLogin($("#form form"));
						}
					});
				}
			});
			// Load links
			loadLinks();
		});
	</script>
</head>
<body>
	<form:form method="post" id="form1" commandName="transaction">
		<table>
			<tr>
				<th colspan="3">Billing information</th>
			</tr>
			<tr>
				<td style="width: 120px;">Amount: </td>
				<td >
					<form:input path="transactionAmount" disabled="true"/>
					<form:hidden path="transactionAmount"/>
				</td>
				<td><form:errors path="transactionAmount" /></td>
			</tr>
			<tr>
				<td>Receiver Account: </td>
				<td>
					<form:input path="accountTo" disabled="true"/>
					<form:hidden path="accountTo"/>
				</td>
				<td>
					<form:errors path="accountFrom" />
					<form:errors path="accountTo" />
				</td>
			</tr>
			<tr>
				<td>Details: </td>
				<td>
					<form:input path="transactionDetails" disabled="true"/>
					<form:hidden path="transactionDetails"/>
				</td>
				<td><form:errors path="transactionDetails" /></td>
			</tr>
			<tr>
				<td>Trigger ID: </td>
				<td>
					<input type="text" disabled="disabled" value="${triggerId}"/>
					<input type="hidden" id="triggerId" value="${triggerId}" name="triggerId"/>
					<input type="hidden" id="backURL" value="${backURL}" name="backURL"/>
					<input type="hidden" id="uniqPaymentCode" value="${uniqPaymentCode}" name="uniqPaymentCode"/>
				</td>
				<td></td>
			</tr>	
		</table>
	<div id="links"></div>
	<div id="login" style="display: none;" title="Login Form"></div>
	</form:form>

</body>
</html>
